<!--
 * @Author: krsea 965837746@qq.com
 * @Date: 2025-03-03 11:23:01
 * @LastEditors: krsea 965837746@qq.com
 * @LastEditTime: 2025-03-03 11:38:37
 * @FilePath: \vue3-code\2305\week3\pre 基础模板 商品项组件模板 商品列表组件模板.html
 * @Description: 使用 props 传递动态数据：可以使用 v-bind 指令将父组件的动态数据绑定到子组件的 props 上 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件的基本使用</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 vue.js -->
     <script src="../js/vue.js"></script>
</head>
<body>
    <!-- div id 为 app 挂载点 -->
     <div id="app">
        <div class="container">
            <h2 class="text-center">商品列表</h2>
            <!-- 使用商品列表组件  --> 
            <product-list :products="products"></product-list>
        </div>
     </div>
    
      <!-- 商品项组件模板 -->
    <template id="product-item-template">
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title">{{ product.name }}</h3>
                    <p class="card-text">价格: ${{ product.price }}</p>
                    <p class="card-text">描述: {{ product.description }}</p>
                </div>
            </div>
        </div>
    </template>

    <!-- 商品列表组件模板 -->
    <template id="product-list-template">
        <div class="row">
            <product-item 
                v-for="(product, index) in products" 
                :key="index" 
                :product="product">
            </product-item>
        </div>
    </template>
    
     <!-- 使用 javascript 脚本 -->
      <script type="text/javascript">
        // 定义商品项组件
        Vue.component('product-item', {
            props: ['product'],
            template: '#product-item-template'
        });

        // 定义商品列表组件
        Vue.component('product-list', {
            props: ['products'],
            template: '#product-list-template'
        });

        // 创建Vue实例
        new Vue({
            el: '#app',
            data: {
                // 商品列表数据
                products: [
                    {
                        name: 'iPhone 15',
                        price: 999,
                        description: '最新款苹果手机，性能强劲'
                    },
                    {
                        name: 'MacBook Pro',
                        price: 1999,
                        description: '高性能笔记本电脑，适合专业人士'
                    },
                    {
                        name: 'Apple Watch',
                        price: 399,
                        description: '智能手表，具备多种健康监测功能'
                    }
                ]
            }
        });
      </script>
</body>
</html>